<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
		<meta name="renderer" content="webkit" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-title" content="" />
		<meta name="format-detection" content="telephone=no,email=no,adress=no" />
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="css/test.css" />
		<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css" />
		<script type="text/javascript" src="js/jquery-3.2.1.js"></script>

		<title>评价管理系统</title>
		<style>
			html,body{
			width: 100%;
			height: 100%;
			overflow: auto;
		}
		body{
			background: url(images/bg.png) no-repeat left top;
			background-size: 100%;
		}
	</style>
	</head>


	<body class="homeBg homeBgDetails">
		<header class="headTop">
			<p>评价管理系统</p>
			<img src="images/back.png" onclick="javascript:history.back(-1);">
		</header>
		<section class="contentNei">
			<!-- 内容开始 -->
			<article class="homeCenter">
				<!-- 03 -->
				<div class="homeRule">
					<form action="succeed.html">
						<div class="homeRuleWhite homeRuleWhiteDeta">
							<!-- 中间的连接符 -->
							<div class="homeRuleLian"><img src="images/line.png"></div>
							<div class="homeRuleLianRight"><img src="images/line.png"></div>
						</div>

						<!-- 02 -->
						<div class="homeRuleWhite">
							<div class="detaTop">
								<ul>
									<li>
										<div class="dataTime zhong float">
											<p>筛选查询:</p>
											<div class="detaBox zhong">
												<div class="detaBoxTime">
													<div id='result' class="ui-alert">选择日期</div>
													<img src="images/down.png">
													<button id='demo6' data-options='{"type":"month"}' class="btn mui-btn mui-btn-block">选择月份 ...</button>
												</div>
												
											</div>
										</div>
									</li>
									<li>
										<div class="dataTime zhong float">
											<p>整体评价:</p>
											<div class="detaBox zhong">
												<figure class="zhong">
													<img src="images/faceA.png">
													<figcaption>满意</figcaption>
												</figure>
											</div>
										</div>
									</li>
									<li>
										<div class="dataMan ">
											<p>满意度:</p>
											<div class="dataProgress">
												<hgroup class="zhong">
													<p>满意</p>
													<div class="detaJin"><progress value='80' max='100' class="mypro"></progress></div>
													<p>80%</p>
												</hgroup>
												<hgroup class="zhong">
													<p>一般</p>
													<div class="detaJin"><progress value='15' max='100' class="mypro"></progress></div>
													<p>15%</p>
												</hgroup>
												<hgroup class="zhong">
													<p>不满意</p>
													<div class="detaJin"><progress value='15' max='100' class="mypro"></progress></div>
													<p>15%</p>
												</hgroup>
											</div>
										</div>
									</li>
									<li>
										<div class="dataMan ">
											<p>不满意度:</p>
											<div class="buMan">
												<div class="manLi"><span>•　</span>用餐环境 20%</div>
												<div class="manLi"><span>•　</span>用餐环境 20%</div>
												<div class="manLi"><span>•　</span>用餐环境 20%</div>
												<div class="manLi"><span>•　</span>用餐环境 20%</div>
												<div class="manLi"><span>•　</span>用餐环境 20%</div>
												<div class="manLi"><span>•　</span>用餐环境 20%</div>
												<div class="manLi"><span>•　</span>用餐环境 20%</div>
												<div class="manLi"><span>•　</span>用餐环境 20%</div>
											</div>
										</div>
									</li>
								</ul>
							</div>
						</div>
				</div>
				</form>
			</article>

				
				

		</section>

		<script src="js/mui.min.js"></script>
		<script src="js/mui.picker.min.js"></script>
<script>
			(function($) {
				$.init();
				var result = $('#result')[0];
				var btns = $('.btn');
				btns.each(function(i, btn) {
					btn.addEventListener('tap', function() {
						var _self = this;
						if(_self.picker) {
							_self.picker.show(function (rs) {
								result.innerText = rs.text;
								_self.picker.dispose();
								_self.picker = null;
							});
						} else {
							var optionsJson = this.getAttribute('data-options') || '{}';
							var options = JSON.parse(optionsJson);
							var id = this.getAttribute('id');
							_self.picker = new $.DtPicker(options);
							_self.picker.show(function(rs) {
								result.innerText = rs.text;
								_self.picker.dispose();
								_self.picker = null;
							});
						}
						
					}, false);
				});
			})(mui);
		</script>

	</body>
</html>
